<template>
	<view class="onlinecustomerservice">
		<view class="content">
			<view class="titles">
				<view class="date">
					下午5:31
				</view>
				<view class="fuwu">
					正东物业为您服务
				</view>
			</view>
			<view :class="item.status ?'mysay' :'kefufuwu'" v-for="(item,index) in datalist" :key="item.id">
				<view style="display: flex;" v-if="!item.status">
					<view class="touxiang"></view>
					<view class="wenzi">
						{{item.name}}
					</view>
				</view>
				<view style="display: flex;" v-else>
					<view class="wenzi">
						{{item.name}}
					</view>
					<view class="touxiang"></view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="" style="width: calc(85% - 30rpx);">
				<input type="text" class="inputs" v-model="inputs" />
			</view>
			<view class="" v-if="!inputs">
				<image src="../../../../static/icons/表情.png" mode="" class="icons"></image>
				<image src="../../../../static/icons/更多.png" mode="" class="icons"
					style="width: 45rpx;height: 45rpx;margin-left: 30rpx;">
				</image>
			</view>
			<view class="" style="width: calc(15% + 30rpx);" v-else>
				<button class="goenter" @click="fasongs">发送</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	let inputs = ref('')
	let datalist = ref([{
		id: 1,
		name: '您好，有什么可以帮助到您',
		status: 0
	}, ])
	let kefulist = ref([])
	const entrys = () => {
		console.log(111);
	}
	//点击发送按钮
	const fasongs = () => {
		let obj = {
			id: datalist.value + 1,
			name: inputs.value,
			status: 1
		}
		datalist.value.push(obj)
		inputs.value = ''
		setTimeout(() => {
			let obj = {
				id: kefulist.value + 1,
				name: '人工请输入1',
				status: 0
			}
			datalist.value.push(obj)
		}, 1000)
	}
</script>

<style lang="scss">
	.onlinecustomerservice {
		height: 100vh;
		background-color: #f6f6f6;
		overflow: hidden;

		.content {
			padding: 30rpx;

			.mysay {
				display: flex;
				// align-items: center;
				margin-bottom: 30rpx;
				justify-content: flex-end;

				.touxiang {
					margin-left: 15rpx;
				}

				.wenzi {
					background-color: #c2dcff;
					font-size: 30rpx;
					padding: 20rpx;
					border-radius: 12rpx;
				}
			}

			.kefufuwu {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.touxiang {
					margin-right: 15rpx;
				}

				.wenzi {
					background-color: white;
					font-size: 30rpx;
					padding: 20rpx;
					border-radius: 12rpx;
				}
			}


			.titles {
				font-size: 26rpx;
				text-align: center;
				color: #aaa;
				margin-bottom: 30rpx;
			}

			.touxiang {
				width: 60rpx;
				height: 60rpx;
				background-color: #049fff;
				border-radius: 50%;
			}

			.date {
				margin-top: 30rpx;
			}

			.fuwu {
				margin-top: 30rpx;
			}

		}


		.footer {

			width: calc(100% - 60rpx);
			padding: 30rpx;
			border-top: 2rpx solid #d7d7d7;
			background-color: #f2f1f1;
			position: fixed;
			bottom: 0%;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.goenter {
				font-size: 25rpx;
				background-color: #049fff;
				color: white;
			}

			.icons {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
			}

			.inputs {
				height: 60rpx;
				background-color: white;
				border: 2rpx solid #d7d7d7;
				border-radius: 8rpx;
				margin-right: 30rpx;
			}
		}


	}
</style>